<%--
  Created by IntelliJ IDEA.
  User: Capricorn
  Date: 2021/2/12
  Time: 20:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js" charset="UTF-8"></script>
</head>
<body>
<form id="formData" class="layui-form layui-form-pane" lay-filter="formData" style="display: none">
    <input type="text" name="deptid" hidden>
    <div class="layui-form-item">
        <label class="layui-form-label">编号</label>
        <div class="layui-input-inline">
            <input type="text" name="deptNo" placeholder="请输入部门编号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">部门名字</label>
        <div class="layui-input-inline">
            <input type="text" name="dname" placeholder="请输入部门名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">部门介绍</label>
        <div class="layui-input-inline">
            <input type="text" name="remark" placeholder="请输入部门介绍" autocomplete="off" class="layui-input">
        </div>
    </div>
    <%-- <div class="layui-form-item">
         <label class="layui-form-label">书籍作者</label>
         <div class="layui-input-inline">
             <input type="text" name="author" placeholder="请输入书籍作者" autocomplete="off" class="layui-input">
         </div>
     </div>--%>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="*">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="demoTable">
        <div class="layui-inline">
            <input class="layui-input" placeholder="请输入部门名" name="dname" id="dname" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload" id="search">搜索</button>
    </div>
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addbook">新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>

<%--<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>


</script>--%>
<!--数据表格右侧按钮组-->
<script type="text/html" id="barDemo">
    {{#  if(d.status == 1){ }}
    <div class="layui-btn-group">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <button class='layui-btn layui-btn-xs layui-btn-danger' lay-event="sj">弃用</button>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </div>
    {{#  } else { }}
    <div class="layui-btn-group">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <button class='layui-btn layui-btn-xs layui-btn-normal' lay-event="sj">启用</button>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </div>
    {{#  } }}
</script>

</body>
<script>
    layui.use(['table','jquery','layer','form'], function(){
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        //页面加载完成后执行的事件
        $(function (){
            //当页面加载完成时先调用showTable()函数
            showTable();
            /* aaa();*/
        })


        //封装加载数据表格的方法
        function showTable(){
            table.render({
                elem: '#test'
                ,url:'${pageContext.request.contextPath}/department/getAllDepartment'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,title: '用户数据表'
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'deptid', title:'ID',  fixed: 'left',hide:true, unresize: true, sort: true}
                    ,{field:'deptNo', title:'部门编号'}
                    ,{field:'dname', title:'部门名称', sort: true}
                    ,{field:'num', title:'在职员工人数',  sort: true}
                    ,{field:'status', title:'状态',  sort: true,templet: function(d){
                            if (d.status==0){
                                return "<button class='layui-btn layui-btn-xs layui-btn-danger'>禁用</button>";
                            }else{
                                return "<button class='layui-btn layui-btn-xs layui-btn-normal'>启用</button>";
                            }
                        }}
                    ,{field:'remark', title:'部门描述', sort: true}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
                ]]
                ,page: true
                ,limit:5
                ,limits:[2,5,10,15]
            });
        }

        /**
         * 监听新增/修改书籍信息的表单提交
         */
        form.on('submit(*)', function(data){
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/department/insertDepartment',
                dataType: 'json',
                data:data.field,
                success:function (result){
                    layer.closeAll();
                    if (result !=null ){
                        layer.msg(result.msg, {icon: 1})
                        showTable();
                    }else{
                        layer.msg(result.msg, {icon: 5})
                    }
                }
            })
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        $("#search").click(function (){
            alert("1111")
            //执行重载
            table.reload('test', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    dname: $("#dname").val()
                }
            });
        })
        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'delCheck':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'addbook':
                    //打开弹框前先清空表单
                    $("#formData")[0].reset();
                    layer.open({
                        type: 1 //此处以iframe举例
                        ,title: '新增书籍'
                        ,maxmin: true
                        ,offset: '100px'
                        ,area:['380px','360px']
                        ,content: $("#formData")
                    });
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                //alert(data.bookname);
                layer.confirm('真的删除行么', function(index){
                    $.post('${pageContext.request.contextPath}/department/delDeptidById',{"deptid":data.deptid},function (delobj){
                        if (delobj.code!=0){
                            //alert(delobj.msg);
                            layer.msg(delobj.msg, {icon: 1});
                            showTable();
                        }else {
                            layer.msg(delobj.msg, {icon: 5});
                        }
                    },'json')
                    layer.closeAll();
                });
            } else if(obj.event === 'edit'){
                $("#formData")[0].reset();
                layer.open({
                    type: 1 //此处以iframe举例
                    ,title: '新增书籍'
                    ,maxmin: true
                    ,offset: '100px'
                    ,area:['380px','360px']
                    ,content: $("#formData")
                });
                //填充选中行数据到指定表单
                form.val('formData', data);
            }else if(obj.event === 'sj'){
                $.get('${pageContext.request.contextPath}/department/updateStatus',{"status":data.status,"deptid":data.deptid},function (result){
                    /* if (result!=null){
                         layer.closeAll();
                         showTable();
                         layer.msg("成功");
                     }*/
                    if (result!=null ){
                        showTable();
                        layer.msg(result.msg, {icon: 1});
                    }else{
                        layer.msg(result.msg, {icon: 5});
                    }
                },'json')
            }
        });
    });
</script>
</html>
